<template>
  <div class="devices-list">
    <!-- 设备列表-->
    <div v-if="loading" class="loading">
      <Spin tip="加载中..."></Spin>
    </div>
    <template v-else-if="props.devicesList.length > 0">
      <Collapse
        v-for="(item, index) in props.devicesList"
        :key="index"
        v-model:activeKey="activeKey"
      >
        <template #expandIcon="{ isActive }">
          <div class="tops">
            <div class="top-left">
              <i class="ifont-wid-equipment_icon_dapin" />
              <span>{{ item.name }}</span>
              <span>({{ item.quantity }})</span>
            </div>
            <div>
              <img v-if="isActive" src="../../../assets/images/equipment_icon_upper.png" alt="" />
              <img v-else src="../../../assets/images/equipment_icon_lower.png" alt="" />
            </div>
          </div>
        </template>
        <Collapse.Panel :key="index">
          <div class="list-header">
            <div class="list-td name">设备名称</div>
            <div class="list-td location">设备位置</div>
            <div class="list-td class">归属班级</div>
            <div class="list-td state">设备状态</div>
            <div class="list-td operate">操作</div>
          </div>
          <div v-for="items in item.data" :key="items.id" class="list-tr">
            <div class="list-td name text-ellipsis" :title="items.deviceName">
              {{ items.deviceName }}
            </div>
            <div class="list-td location text-ellipsis" :title="items.locationName">
              <img class="icon-img" src="../../../assets/images/icon_location.png" alt="" />
              {{ items.locationName || '--' }}
            </div>
            <div class="list-td class text-ellipsis">
              <img class="icon-img" src="../../../assets/images/icon_class.png" alt="" />
              {{ items.clazzFullPath || '--' }}
            </div>
            <div class="list-td state">
              <span
                :class="[
                  'icon',
                  items.onlineStatus === 0
                    ? 'out-line'
                    : items.onlineStatus === 1
                    ? 'on-line'
                    : 'error'
                ]"
              ></span>
              <span>
                {{ items.onlineStatus === 0 ? '离线' : items.onlineStatus === 1 ? '在线' : '故障' }}
              </span>
            </div>
            <div class="list-td operate">
              <a-button type="primary" size="small" ghost @click="onSchedule(items.deviceId)">
                发布日程
              </a-button>
              <a-button size="small" class="gray-btn" @click="onDetails(items.deviceId)">
                设备详情
              </a-button>
            </div>
          </div>
        </Collapse.Panel>
      </Collapse>
    </template>
    <div v-else-if="props.devicesList.length === 0" class="no-list">
      <Empty :image="simpleImage" />
    </div>
  </div>
</template>
<script setup>
import { Collapse, Empty, Spin } from 'ant-design-vue';
import { defineProps, ref, defineExpose, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore();
let loading = ref();
const props = defineProps({
  devicesList: {
    type: Array,
    default: () => []
  }
});
function loadings(state) {
  loading.value = state;
}
// 检索就展开
function onActiveKey(state) {
  activeKey.value = state;
}
defineExpose({
  loadings,
  onActiveKey
});
const simpleImage = ref(require('@/assets/images/noData@2x.png'));
// 数据区域
const router = useRouter();
const activeKey = ref([]);
/** **方法区域 ** **/

// 设备详情onSchedule
function onDetails(id) {
  router.push({
    path: '/device-details',
    query: {
      id: id
    }
  });
}
// 发布日程
function onSchedule(id) {
  router.push({
    path: '/schedule',
    query: {
      id: id
    }
  });
}
</script>
<style lang="less" scoped>
.devices-list {
  margin-top: 16px;
  .loading {
    position: fixed;
    top: 50%;
    left: 53%;
  }
  // collapse-header
  .tops {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    .top-left {
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #222222;
      line-height: 1;
      .ifont-wid-equipment_icon_dapin {
        margin-right: 8px;
        margin-top: 2px;
        color: var(--themecolor);
        font-size: 16px !important;
      }
    }
  }
  // collapse-content
  .list-td {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-right: 20px;
    font-size: 14px;
    color: #666666;
    &.name {
      flex: 0.23;
    }
    &.location {
      flex: 0.17;
    }
    &.class {
      flex: 0.22;
    }
    &.state {
      flex: 0.17;
    }
    &.operate {
      flex: 0.21;
    }
  }
  .list-header {
    height: 56px;
    line-height: 56px;
    background: #f8f8f8;
    border-radius: 5px;
    display: flex;
    margin-top: 16px;
    padding: 0 16px;
    .list-td {
      font-weight: 500;
    }
  }
  .list-tr {
    background: #f8f8f8;
    height: 56px;
    line-height: 56px;
    margin-top: 16px;
    padding: 0 16px;
    border-radius: 5px;
    display: flex;
    &:hover {
      background: var(--themecolor02);
    }
    .list-td {
      &.text-ellipsis {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      &.state {
        .icon {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-right: 4px;
          &.out-line {
            background: #999999;
          }
          &.on-line {
            background: #56d6b7;
          }
          &.error {
            background: #fe8f8f;
          }
        }
      }
      .icon-img {
        width: 18px;
        height: 18px;
        margin-right: 5px;
      }
      .gray-btn {
        margin-left: 10px;
        color: #999;
        &:hover {
          color: var(--themecolor) !important;
        }
      }
    }
  }
  // 空状态
  .no-list {
    height: 610px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  // collapse组件默认样式修改
  :deep(.micro-ant-collapse) {
    margin-top: 16px;
    border: 1px solid #e1dddd;
    border-radius: 5px;
    overflow: hidden;
    .micro-ant-collapse-item {
      border: none;
      .micro-ant-collapse-header {
        padding: 16px;
        & > div {
          width: 100%;
        }
      }
      .micro-ant-collapse-content {
        border: none;
        position: relative;
        &::before {
          content: '';
          height: 1px;
          position: absolute;
          top: -1px;
          left: 16px;
          right: 16px;
          box-shadow: 0px 0.5px 0px 0px #e1dddd;
        }
        .micro-ant-collapse-content-box {
          max-height: 378px;
          padding: 0 26px 16px 26px;
          overflow: auto;
        }
      }
    }
  }
}
</style>
